<template>
  <div class="page-box">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>Ethers.js</span>
          <el-link type="primary" href="https://docs.ethers.io/v5/getting-started/" target="_blank"
            >Docs</el-link
          >
        </div>
      </template>
      <div class="card-content">
        <div class="item">
          <p class="title">1. Providers</p>
          <f-code :code="codeProvider" />
        </div>
        <div class="item">
          <p class="title">2. 获取链信息</p>
          <f-code :code="codeNetwork" />
        </div>
        <div class="item">
          <p class="title">3. 获取账户信息</p>
          <f-code :code="codeAddress" />
        </div>
        <div class="item">
          <p class="title">3. 监听区块</p>
          <f-code :code="codeBlockNumber" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import FCode from '@/components/f-code/index.vue'
import { ref } from 'vue'

const codeProvider = ref(`
const providers = new ethers.providers.Web3Provider(window.ethereum)
`)
const codeNetwork = ref(`
await providers.getNetwork()
`)
const codeAddress = ref(`
const accounts = await providers.listAccounts()
const balance = await providers.getBalance(accounts[0])
`)
const codeBlockNumber = ref(`
providers.on('block', (blockNumber) => {
  console.log(blockNumber)
})
`)
</script>

<style scoped></style>
